<template>
	<view class="comment-list">
		<!-- <u-sticky>
			<view class="classify">
				<view class="title">用户评价(263)</view>
				<view class="classify-list d-flex flex-wrap">
					<view
						v-for="(item, index) in classify"
						:key="item.id"
					>
						<u-tag
							:text="item.text"
							size="mini"
							:bgColor="active === index ? 'rgba(1, 109, 255, 0.1)' : '#F3F3F3'"
							shape="circle"
							borderColor="rgba(0,0,0,0)"
							:color="active === index ? '#016DFF' : '#333'"
							@click="onClickClassify(index)"
						/>
					</view>
				</view>
			</view>
		</u-sticky> -->
		
		<!-- <u-gap height="20rpx" bgColor="#F3F3F3"></u-gap> -->
		
		<view class="list">
			<comment-item
				v-for="item in list"
				:key="item.id"
				:data="item"
			/>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="评价" shape="circle" @click="comment" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			active: 0,
			classify: [
				{ id: 1, text: '全部(263)' },
				{ id: 2, text: '有图(72)' },
				{ id: 3, text: '好评(162)' },
				{ id: 4, text: '中评(36)' },
				{ id: 5, text: '差评(23)' },
			],
			list: [
				{
					id: 1,
					name: '菜*身',
					rate: 4,
					content: '环境还不错，旁边还有指导老师指导',
					date: '03-15',
					image: ['', '', '', '']
				},
			]
		}
	},
	onLoad({ id }) {
		this.id = id;
	},
	methods: {
		onClickClassify(index) {
			this.active = index;
		},
		comment() {
			uni.navigateTo({
				url: `/pages/personal/comment/comment?id=${this.id}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.comment-list {
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	
	.classify {
		padding: 40rpx 30rpx 20rpx;
		background-color: #fff;
		
		.classify-list {
			margin-top: 40rpx;
			margin-left: -20rpx;
		}
		
		/deep/.u-tag {
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			min-width: 180rpx;
			height: 52rpx;
			line-height: 52rpx;
			justify-content: center;
		}
	}
}
</style>
